<template>
  <div class="index">
    <div class="container">
      <div class="swiper-box">
        <swiper ref="mySwiper" class="SwiperContainer" :options="swiperOptions">
          <swiper-slide v-for="(item, index) in slideList" v-bind:key="index">
            <a v-bind:href="'/#/product/' + item.id"
              ><img v-bind:src="item.img"
            /></a>
          </swiper-slide>
          <!-- Optional controls -->
          <div class="swiper-button-prev" slot="button-prev"></div>
          <div class="swiper-button-next" slot="button-next"></div>
          <div class="swiper-pagination" slot="pagination"></div>
        </swiper>
        <div class="nav-menu">
          <ul class="menu-wrap" @mouseleave="toggleShowSubMenu('0')">
            <li class="menu-item" @mouseenter="toggleShowSubMenu('1')">
              手机 电话卡
            </li>
            <li class="menu-item">
              电视 电话卡
            </li>
            <li class="menu-item">
              家电 电话卡
            </li>
            <li class="menu-item">
              家电 电话卡
            </li>
            <li class="menu-item">
              家电 电话卡
            </li>
            <li class="menu-item">
              家电 电话卡
            </li>
            <li class="menu-item">
              家电 电话卡
            </li>
            <div class="menu-children" v-show="showSubMenu">
              <ul v-for="(item, i) in menuList" v-bind:key="i">
                <li v-for="(sub, j) in item" v-bind:key="j">
                  <a v-bind:href="sub ? '/#/product/' + sub.id : ''">
                    <img
                      v-bind:src="sub ? sub.img : '/imgs/item-box-1.png'"
                      alt=""
                    />
                    {{ sub ? sub.name : '小米9' }}
                  </a>
                </li>
              </ul>
            </div>
          </ul>
        </div>
      </div>
      <div class="ads-box">
        <a
          v-bind:href="'/#/product/' + item.id"
          v-for="(item, index) in adsList"
          v-bind:key="index"
        >
          <img v-lazy="item.img" alt="" />
        </a>
      </div>
      <div class="banner">
        <a href="/#/product/30">
          <img v-lazy="'/imgs/banner-1.png'" alt="" />
        </a>
      </div>
      <div class="product-box section">
        <div class="title">手机</div>
        <div class="wrap">
          <div class="banner-left">
            <a href="/#/product/35"
              ><img v-lazy="'/imgs/mix-alpha.jpg'" alt=""
            /></a>
          </div>
          <div class="goodsList">
            <div
              class="goodsItem"
              v-for="(item, index) in phoneList"
              :key="item.id"
            >
              <a href="javascript:;">
                <span class="new-pro" v-if="index % 2 == 0">新品</span>
                <span class="kill-pro" v-else-if="index != 0 && index % 5 == 0"
                  >秒杀</span
                >
                <img v-lazy="item.mainImage" alt="" />
                <div class="desc">
                  <div class="name">{{ item.name }}</div>
                  <div class="sub-desc">{{ item.subtitle }}</div>
                </div>
                <div class="price" @click="addCart(item.id)">
                  {{ item.price }}元
                </div>
              </a>
            </div>
          </div>
        </div>
      </div>
      <modal
        title="提示信息"
        :showModal="showModal"
        :buttonType="1"
        @close="pclose"
      >
        <template v-slot:body>商品添加成功</template>
      </modal>
    </div>
  </div>
</template>

<script>
import { Swiper, SwiperSlide } from 'vue-awesome-swiper'
import modal from '../components/Modal'
import 'swiper/dist/css/swiper.css'
export default {
  name: 'index',
  components: {
    Swiper,
    SwiperSlide,
    modal,
  },
  data() {
    return {
      swiperOptions: {
        autoplay: true,
        loop: true,
        effect: 'cube',
        cubeEffect: {
          slideShadows: true,
          shadow: true,
          shadowOffset: 100,
          shadowScale: 0.6,
        },
        pagination: {
          el: '.swiper-pagination',
          clickable: true,
        },
        navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev',
        },
      },

      slideList: [
        {
          id: '42',
          img: '/imgs/slider/slide-1.jpg',
        },
        {
          id: '45',
          img: '/imgs/slider/slide-2.jpg',
        },
        {
          id: '46',
          img: '/imgs/slider/slide-3.jpg',
        },
        {
          id: '',
          img: '/imgs/slider/slide-4.jpg',
        },
        {
          id: '',
          img: '/imgs/slider/slide-1.jpg',
        },
      ],
      showSubMenu: false,
      menuList: [
        [
          {
            id: 30,
            img: '/imgs/item-box-1.png',
            name: '小米CC9',
          },
          {
            id: 31,
            img: '/imgs/item-box-2.png',
            name: '小米8青春版',
          },
          {
            id: 32,
            img: '/imgs/item-box-3.jpg',
            name: 'Redmi K20 Pro',
          },
          {
            id: 33,
            img: '/imgs/item-box-4.jpg',
            name: '移动4G专区',
          },
        ],
        [0, 0, 0, 0],
        [0, 0, 0, 0],
        [0, 0, 0, 0],
        [0, 0, 0, 0],
        [0, 0, 0, 0],
      ],
      adsList: [
        {
          id: 33,
          img: '/imgs/ads/ads-1.png',
        },
        {
          id: 48,
          img: '/imgs/ads/ads-2.jpg',
        },
        {
          id: 45,
          img: '/imgs/ads/ads-3.png',
        },
        {
          id: 47,
          img: '/imgs/ads/ads-4.jpg',
        },
      ],
      phoneList: [],
      showModal: false,
    }
  },
  computed: {},
  mounted() {
    this.init()
  },
  methods: {
    init() {
      this.axios
        .get('/products', {
          params: {
            categoryId: 100012,
            pageSize: 14,
          },
        })
        .then((res) => {
          res.list = res.list.slice(6, 14)
          // this.phoneList = [res.list.slice(0, 4), res.list.slice(4, 8)]
          this.phoneList = res.list
        })
    },
    toggleShowSubMenu(flag) {
      flag === '1' ? (this.showSubMenu = true) : (this.showSubMenu = false)
    },
    pclose() {
      this.showModal = false
    },
    addCart(id) {
      // console.log(id)
      // this.showModal = true
      // return
      this.axios
        .post('/carts', {
          productId: id,
          selected: true,
        })
        .then((res) => {
          this.showModal = true
          this.$store.dispatch('saveCartCount', res.cartTotalQuantity)
        })
        .catch(() => {
          this.showModal = true
        })
    },
  },
}
</script>

<style lang="scss">
@import '../assets/scss/mixin.scss';
@import '../assets/scss/config.scss';

.index {
  .swiper-box {
    width: 1226px;
    height: 460px;
    overflow: hidden;
    position: relative;
    img {
      width: 100%;
      vertical-align: middle;
    }
    .SwiperContainer {
      --swiper-theme-color: #ff6600;
      --swiper-pagination-color: #00ff33; /* 两种都可以 */
      .swiper-button-prev {
        left: 244px;
      }
    }
    .nav-menu {
      position: absolute;
      top: 0;
      left: 0;
      z-index: 21;
      // width: 100%;
      height: 460px;
      font-size: 14px;

      .menu-wrap {
        width: 234px;
        height: 460px;
        border: 0;
        color: #fff;
        padding: 20px 0;
        background: rgba(105, 101, 101, 0.6);
        .menu-item {
          position: relative;
          padding-left: 30px;
          height: 42px;
          line-height: 42px;
          &::after {
            content: '';
            display: inline;
            width: 20px;
            height: 20px;
            @include bgImg(14px, 14px, '/imgs/icon-arrow.png');
            position: absolute;
            top: 14px;
            right: 20px;
          }

          &:hover {
            background-color: #ff6600;
          }
        }
        // & .menu-item:hover & .menu-children {
        //   display: block;
        // }
        .menu-children {
          // display: none;
          position: absolute;
          top: 0;
          left: 234px;

          width: 1026px;
          // padding: 0 40px;
          height: 460px;
          background-color: #fff;
          ul {
            display: flex;
            justify-content: space-between;
            height: 75px;
            li {
              height: 75px;
              line-height: 75px;
              flex: 1;
              padding-left: 23px;
            }
            a {
              color: #333;
              font-size: 14px;
            }
            img {
              width: 42px;
              height: 35px;
              vertical-align: middle;
              margin-right: 15px;
            }
          }
        }
      }
    }
  }
  .ads-box {
    width: 100%;
    display: flex;
    justify-content: space-between;
    margin-top: 30px;
    img {
      width: 296px;
      height: 170px;
    }
  }
  .banner {
    width: 100%;
    margin-top: 30px;
    img {
      width: 100%;
    }
  }
  .section {
    margin-top: 30px;
    .title {
      font-size: $fontF;
      height: 21px;
      line-height: 21px;
      color: $colorB;
      margin-bottom: 20px;
    }
  }
  .product-box {
    .wrap {
      @include flex();

      .banner-left {
        margin-right: 16px;

        img {
          width: 224px;
          height: 619px;
        }
      }
      .goodsList {
        @include flex();

        flex-wrap: wrap;
        .goodsItem a {
          width: 236px;
          height: 302px;
          background-color: $colorG;
          @include flex(space-around);

          flex-direction: column;
          span {
            width: 67px;
            height: 24px;
            font-size: 14px;
            line-height: 24px;
            color: $colorG;
            text-align: center;
            margin-top: 24px;

            &.new-pro {
              background-color: #7ecf68;
            }

            &.kill-pro {
              background-color: #e82626;
            }
          }
          img {
            width: 160px;
            height: 160px;
          }
          .desc {
            text-align: center;

            .name {
              font-size: $fontJ;
              color: $colorB;
              line-height: $fontJ;
              font-weight: bold;
            }
            .sub-desc {
              color: $colorD;
              line-height: 13px;
              margin: 6px auto 13px;
            }
          }
          .price {
            color: $colorA;
            font-size: $fontJ;
            line-height: $fontJ;
            font-weight: bold;
            cursor: pointer;

            &:after {
              @include bgImg(22px, 22px, '/imgs/icon-cart.png');
              content: '';
              display: inline-block;
              margin-left: 5px;
              vertical-align: middle;
            }
            &:hover {
              &:after {
                @include bgImg(22px, 22px, '/imgs/icon-cart-hover.png');
              }
            }
          }
        }
      }
    }
  }
}
</style>
